.example-box
  width: 200px
  height: 200px
  border: solid 1px #ccc
  color: rgba(0, 0, 0, 0.87)
  cursor: move
  display: flex
  justify-content: center
  align-items: center
  text-align: center
  background: #fff
  border-radius: 4px
  position: relative
  z-index: 1
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1)
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),0 2px 2px 0 rgba(0, 0, 0, 0.14),0 1px 5px 0 rgba(0, 0, 0, 0.12)
  
  &-list
    padding: 20px 10px
    border-bottom: solid 1px #ccc
    color: rgba(0, 0, 0, 0.87)
    display: flex
    flex-direction: row
    align-items: center
    justify-content: space-between
    box-sizing: border-box
    cursor: move
    background: white
    font-size: 14px
  
.example-box:active
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),0 8px 10px 1px rgba(0, 0, 0, 0.14),0 3px 14px 2px rgba(0, 0, 0, 0.12),

.example-boundary
  width: 400px
  height: 400px
  max-width: 100%
  border: dotted #ccc 2px

.example-container
  width: 400px
  max-width: 100%
  margin: 0 25px 25px 0
  display: inline-block
  vertical-align: top

.example-list
  width: 500px
  max-width: 100%
  border: solid 1px #ccc
  min-height: 60px
  display: block
  background: white
  border-radius: 4px
  overflow: hidden

.cdk-drag-preview
  box-sizing: border-box
  border-radius: 4px
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),0 8px 10px 1px rgba(0, 0, 0, 0.14),0 3px 14px 2px rgba(0, 0, 0, 0.12)

.cdk-drag-placeholder
  opacity: 0.2

.cdk-drag-animating
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)

.example-box:last-child
  border: none

.example-list.cdk-drop-list-dragging .example-box-list:not(.cdk-drag-placeholder)
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)

.example-handle
  position: absolute
  top: 10px
  right: 10px
  color: #ccc
  cursor: move
  width: 24px
  height: 24px

.example-custom-placeholder
  background: #ccc !important
  border: dotted 3px #999
  min-height: 60px
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1)
